let mbox={
    css:{
        box:"position:fixed; width:300px; height:200px;  left:50%; top:50%; margin-left:-150px; margin-top:-100px; background-color:white;box-shadow:0 0 5p silver; border:0; padding:0; text-align:right; box-sizing: border-box; overflow:hide;",
        title:"width:100%; height:40px; line-height:40px; text-align:center; border:0;padding:0;margin:0; box-sizing: border-box; font-size:1.2rem;",
        content:"height:120px; border:0;padding:1rem;margin:0; box-sizing: border-box; text-align:left; overflow:auto",
        button:"padding:5px 10px; box-sizing: border-box; border:0; cursor:pointer; margin-right:10px; margin-top:5px;",
        info:"background-color:cornflowerblue; color:white;",
        error:"background-color:orange; color:white;",
        load:"background-color:transparent; display:flex; border:0; position:fixed; width:300px; height:200px; left:50%; top:50%; margin-left:-150px; margin-top:-100px; border:0; justify-content: center; align-items:center;",
        item:"width:5px; height:50px; background-color:cornflowerblue; margin:0 3px; border-radius:10px; animation:loading 1s infinite;"
    },
    type:"info",
    GetCSS:function(key){
        if(key=="title"){
            return mbox.css[key]+mbox.css[mbox.type]
        }
        if(key=="button"){
            return mbox.css[key]+mbox.css[mbox.type]
        }
        return mbox.css[key];
    },
    view:function(vnode){
        return [
            m("div",{style:mbox.GetCSS("title")},vnode.attrs.title),
            m("div",{style:mbox.GetCSS("content")},vnode.attrs.msg),
            m("button",{onclick:mbox.Hide,style:mbox.GetCSS("button")},"取消")
        ]
    },
    Loading:function(){
        mbox.Have("load");
        m.render(document.querySelector("dialog"),[
            m("div",{style:mbox.css.item+"animation-delay:0.1s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.2s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.3s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.4s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.5s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.6s"}),
            m("div",{style:mbox.css.item+"animation-delay:0.7s"})
        ]);
        mbox.Show();
    },
    Error:function(msg){
        mbox.Have("error");
        m.render(document.querySelector("dialog"),m(mbox,{title:"错误(ERROR)",msg:msg}));
        mbox.Show();
    },
    Info:function(msg){
        mbox.Have("info");
        m.render(document.querySelector("dialog"),m(mbox,{title:"提示(INFO.)",msg:msg}));
        mbox.Show();
    },
    Confirm:function(msg,cb){
        mbox.Have("info");
        m.render(document.querySelector("dialog"),[
            m("div",{style:mbox.GetCSS("title")},"确认(CONFIRM)"),
            m("div",{style:mbox.GetCSS("content")},msg),
            m("button",{onclick:function(){
                mbox.Hide();
                cb();
            },style:mbox.GetCSS("button")},"确定"),
            m("button",{onclick:mbox.Hide,style:mbox.GetCSS("button")+mbox.GetCSS("error")},"取消"),
        ]);
        mbox.Show();
    },
    Have:function(type){
        mbox.type=type;
        if(!document.querySelector("dialog")){
            var style="@keyframes loading{0%{height:0px} 50%{height:50px} 100%{height:0}} dialog{border:0;}";
            var s=document.createElement("style");
            s.type="text/css";
            s.innerHTML=style;
            document.head.appendChild(s);
            var dialog=document.createElement("dialog");
            document.body.appendChild(dialog);
        }
        if(type=="load"){
            document.querySelector("dialog").setAttribute("style",mbox.GetCSS("load"));
        }else{
            document.querySelector("dialog").setAttribute("style",mbox.GetCSS("box"));
        }
    },
    Show:function(){
        document.querySelector("dialog").showModal();
    },
    Hide:function(){
        if(document.querySelector("dialog")){
            document.querySelector("dialog").style.display="none";
        }
        document.querySelector("dialog").close();
    }
}